<template>
  <div>
    <div class="edit-info">
      <div class="public-edit">
        <!--todo:基础信息-->
        <form v-if="editType == 'normal'" action="">
          <div class="public-edit-item">
            <span class="label">昵称</span>
            <input v-model="formData.name" type="text" class="edit-input" placeholder="请输入昵称">
            <div class="right icon" @click="clearLine('name')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">联系人</span>
            <input v-model="formData.contact_name" type="text" class="edit-input" placeholder="请输入联系人">
            <div class="right icon" @click="clearLine('contact_name')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">手机号</span>
            <input v-model="formData.contact_mobile" type="text" class="edit-input" placeholder="请输入手机号">
            <div class="right icon" @click="clearLine('contact_mobile')">
              <svg-icon icon-class="icon_close" />
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">电话号码</span>
            <input v-model="formData.mobile" type="text" class="edit-input" placeholder="请输入电话号码">
            <div class="right icon" @click="clearLine('mobile')">
              <svg-icon icon-class="icon_close" />
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">联系地址</span>
            <input v-model="formData.contact_address" type="text" class="edit-input" placeholder="请输入联系地址">
            <div class="right icon" @click="clearLine('contact_address')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>
        </form>
        <!--todo:修改密码-->
        <form v-if="editType == 'password'" action="">
          <div class="public-edit-item">
            <span class="label">原密码</span>
            <input v-model="passwordData.old_password" type="password" class="edit-input" placeholder="请输入新密码">
            <div class="right icon" @click="clearLine('old_password')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">新密码</span>
            <input v-model="passwordData.new_password" type="password" class="edit-input" placeholder="请输入新密码">
            <div class="right icon" @click="clearLine('new_password')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>
          <div class="public-edit-item">
            <span class="label">确认密码</span>
            <input v-model="passwordData.new_password_confirmation" type="password" class="edit-input" placeholder="请输入确认密码">
            <div class="right icon" @click="clearLine('new_password_confirmation')">
              <svg-icon icon-class="icon_close"/>
            </div>
          </div>

        </form>
        <!--todo:修改发票信息-->
        <form v-if="editType == 'invoice'" action="">
          <div class="public-edit-item">
            <span class="label">发票抬头</span>
            <input v-model="account.invoice_title" type="text" class="edit-input" placeholder="请输入发票抬头">

          </div>
          <div class="public-edit-item">
            <span class="label">纳税人识别号</span>
            <input v-model="account.invoice_code" type="text" class="edit-input" placeholder="请输入纳税人识别号">
          </div>
          <div class="public-edit-item">
            <span class="label">地址</span>
            <input v-model="account.invoice_address" type="text" class="edit-input" placeholder="请输入地址">

          </div>
          <div class="public-edit-item">
            <span class="label">电话</span>
            <input v-model="account.invoice_phone" type="text" class="edit-input" placeholder="请输入电话">

          </div>
          <div class="public-edit-item">
            <span class="label">开户名称</span>
            <input v-model="account.bank_account_name" type="text" class="edit-input" placeholder="请输入开户名称">

          </div>
          <div class="public-edit-item">
            <span class="label">开户银行</span>
            <input v-model="account.bank_name" type="text" class="edit-input" placeholder="请输入开户银行">
          </div>
          <div class="public-edit-item">
            <span class="label">银行账号</span>
            <input v-model="account.bank_code" type="text" class="edit-input" placeholder="请输入银行账号">
          </div>


        </form>
      </div>
      <div class="footer-btn" v-if="showBtn">
        <div v-if="editType == 'normal'" class="btn btn-orange" @click="editEvent">确认提交</div>
        <div v-if="editType == 'password'" class="btn btn-orange" @click="editPasswordFn">确认提交</div>
        <div v-if="editType == 'invoice'" class="btn btn-orange" @click="editInvoiceFn">确认提交</div>
      </div>
    </div>
  </div>
</template>

<script>
import { editUserInfo } from '@/api/system'
import { editPassword } from '@/api/login'
import { mapGetters } from 'vuex'
export default {
  name: 'Index',
  data() {
    return {
      editType: undefined, // 编辑类型
      formData: {
        name: '',
        mobile: '',
        contact_name: '',
        contact_mobile: '',
        contact_address: ''
      },
      passwordData: {
        old_password: '',
        new_password: '',
        new_password_confirmation: ''
      },
      showBtn: true
    }
  },
  computed: {
    ...mapGetters([
      'account'
    ])
  },
  created() {
    this.whichRoute()
    this.defaultData()
  },
  mounted() {
    const h1 = window.innerHeight
    window.addEventListener('resize', () => {
      const h2 = window.innerHeight
      console.log(h1, h2)
      this.showBtn = h2 >= h1
    })
  },
  methods: {
    whichRoute() {
      this.editType = this.$route.query.editType
      console.log('account', this.account)
      // this.invoiceData.invoice_title = this.account.invoice_title
      // this.invoiceData.invoice_code = this.account.invoice_code
      // this.invoiceData.invoice_address = this.account.invoice_address
      // this.invoiceData.invoice_phone = this.account.invoice_phone
      // this.invoiceData.bank_account_name = this.account.bank_account_name
      // this.invoiceData.bank_name = this.account.bank_name
      // this.invoiceData.bank_code = this.account.bank_code
    },
    defaultData() {
      const userInfo = this.$store.state.user.account
      // console.log(userInfo)
      this.formData.name = userInfo.name
      this.formData.mobile = userInfo.mobile
      this.formData.contact_name = userInfo.contact_name
      this.formData.contact_mobile = userInfo.contact_mobile
      this.formData.contact_address = userInfo.contact_address
    },
    editEvent() {
      this.$toast.loading({
        duration: 10000,
        mask: true,
        message: '正在提交...'
      })
      editUserInfo(this.formData).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.$store.dispatch('GetUserInfo').then(resp => {
            if (resp.data.status_code === 200) {
              this.backToInfo()
            }
          })
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    editPasswordFn() {
      this.$toast.loading({
        duration: 10000,
        mask: true,
        message: '正在提交...'
      })
      editPassword(this.passwordData).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.backToInfo()
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    // 修改发票信息
    editInvoiceFn() {
      // this.account.invoice_title = this.invoiceData.invoice_title
      // this.account.invoice_code = this.invoiceData.invoice_code
      // this.account.invoice_address = this.invoiceData.invoice_address
      // this.account.invoice_phone = this.invoiceData.invoice_phone
      // this.account.bank_account_name = this.invoiceData.bank_account_name
      // this.account.bank_name = this.invoiceData.bank_name
      // this.account.bank_code = this.invoiceData.bank_code
      editUserInfo(this.account).then(res => {
        this.$toast.clear()
        const data = res.data
        if (data.status_code === 200) {
          this.$toast.success({
            message: data.message,
            duration: 1500
          })
          this.$store.dispatch('GetUserInfo').then(resp => {
            if (resp.data.status_code === 200) {
              this.backToInfo()
            }
          })
        } else {
          this.$toast.fail({
            message: data.message,
            duration: 1500
          })
        }
      })
    },
    clearLine(val) {
      if (val === 'name') {
        this.formData.name = ''
      } else if (val === 'contact_name') {
        this.formData.contact_name = ''
      } else if (val === 'mobile') {
        this.formData.mobile = ''
      } else if (val === 'contact_mobile') {
        this.formData.contact_mobile = ''
      } else if (val === 'contact_address') {
        this.formData.contact_address = ''
      } else if (val === 'old_password') {
        this.passwordData.old_password = ''
      } else if (val === 'new_password') {
        this.passwordData.new_password = ''
      } else if (val === 'new_password_confirmation') {
        this.passwordData.new_password_confirmation = ''
      }
    },
    backToInfo() {
      this.$router.push({
        name: 'user-info'
      })
    }
  }
}
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .public-edit-item{
    width: 100%;
    padding: 0 pxCalc(20px);
    display: flex;
    .label{
      text-align: left;
      width: 9em;
    }
    .icon{
      position: absolute;
      right: pxCalc(15px);
      display: inherit;
      margin-right: 0;
    }
  }
  .footer-btn{
    position: absolute;
    bottom: pxCalc(10px);
    width: 100%;
    text-align: center;
    .btn{
      font-size: pxCalc(14px);
      width: pxCalc(355px);
      height: pxCalc(45px);
      color: #999999;
      border-radius: 50px;
      text-align: center;
      line-height: pxCalc(45px);
      border: pxCalc(1px) solid #dad7d7;
      background: #fff;
      cursor: pointer;
      display: inline-block;
      margin: 0 auto;
      &:active{
        background: #eee;
      }
      &.btn-orange{
        background: #ff7340;
        border: pxCalc(1px) solid #ff7340;
        color: #fff;
        &:active{
          background: #e26739;
        }
      }
    }
  }

</style>
